<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>身份证年龄计算</title>
    <!-- 为什么jquery加上版本号就不行呢！！ 3.5.1 -->
    <script th:src="@{/js/jquery.js}"></script>
    <!--<script src="/hi/js/jquery.js"></script>-->
</head>
<body>
<div style="text-align: center">
    <h1>获取身份证信息</h1>
    <input id="idNumber" placeholder="请输入身份证号码"/>
    获取:
    <button onclick="getAge()">年龄</button>
    <!--<button onclick="getProvince()">获取省出生地</button>-->
    <button onclick="getCityOrProvince('province')">省出生地</button>
    <button onclick="getCityOrProvince('city')">县（区）</button>
    <button onclick="getProvinceCity()">省市县</button>
    <button onclick="getSex()">性别</button>
    <p id="content"></p>
</div>
<script type="application/javascript">
    let idNumberInput = document.getElementById("idNumber")

    function getAge() {
        let idNumber = idNumberInput.value
        if (!idNumber) {
            idNumberFocus();
            return;
        }
        window.document.location.href = getRootPath() + "/idCard/age/" + idNumber
    }

    function getProvince() {
        let idNumber = idNumberInput.value
        if (!idNumber) {
            idNumberFocus();
            return;
        }
        // window.document.location.href = getRootPath() + "/idCard/province/" + idNumber
        window.document.location.href = getRootPath() + "/idCard/cityOrProvince/" + idNumber + "/0"
    }

    function getProvinceCity() {
        let idNumber = idNumberInput.value
        if (!idNumber) {
            idNumberFocus();
            return;
        }
        $.get({
            url: getRootPath() + "/idCard/cityOrProvince/" + idNumber,
            success: function (data) {
                $("#content").text(data)
            }
        })
        /*let idNumber = idNumberInput.value
        if (!idNumber) {
            idNumberFocus();
            return;
        }
        window.document.location.href = getRootPath() + "/idCard/cityOrProvince/" + idNumber*/
    }

    // function getCity(city) {
    function getCityOrProvince(cOrp) {
        let idNumber = idNumberInput.value
        if (!idNumber) {
            idNumberFocus();
            return;
        }
        let type = cOrp === 'city' ? "/1" : "/0";
        /*let type = "/0";
        if (cOrp === 'city') {
            type = "/1"
        } else if (cOrp === 'province') {
            type = "/0"
        }*/
        let cityAll = "/idCard/cityOrProvince/" + idNumber + type
        window.document.location.href = getRootPath() + cityAll
    }

    function getSex() {
        let idNumber = idNumberInput.value
        if (!idNumber) {
            idNumberFocus();
            return;
        }
        window.document.location.href = getRootPath() + "/idCard/sex/" + idNumber
    }

    function idNumberFocus() {
        alert("请填写身份证号");
        idNumberInput.focus();
    }

    //获取项目根路径
    function getRootPath() {
        let pathName = window.document.location.pathname;
        return pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    }
</script>
</body>
</html>